<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-11 15:29:57
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-12 14:46:59
 * @FilePath: month.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-11 15:29:57
-->
<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-12 14:05:58
 * @FilePath: month.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <div :class="classNames">
    <div class="arco-calendar-week-list">
      <div
        v-for="item in weekList"
        :key="item"
        class="arco-calendar-week-list-item"
      >
        {{ item }}
      </div>
    </div>
    <div class="arco-calendar-month-cell-body">
      <div
        v-for="(item, index) in rows"
        :key="index"
        class="arco-calendar-month-row"
      >
        <div
          v-for="(items, indexs) in item"
          :key="indexs"
          :class="getCellClassName(items)"
          @click="changeDay(items)"
        >
          <div class="arco-calendar-date">
            <div class="arco-calendar-date-value">
              <div class="arco-calendar-date-circle">
                {{ items.date }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import dayjs from "dayjs";
import { computed, defineComponent, ref } from "vue";
const month = defineComponent({
  name: "Month",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    headerValue: {
      type: Object,
      required: true,
    },
    value: {
      type: Object,
      required: true,
    },
    selectHandler: {
      type: Function,
      required: true,
    },
    pageShowDate: {
      type: Object,
      required: true,
    },
    mode: {
      type: String,
    },
  },
  setup(props) {
    const prefixCls = "arco-calendar";

    const active = ref("");

    const allDaysInOnePage = 6 * 7;
    const weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    // //日历渲染开始日期
    // let startDate = dayjs(`${2023}-${4}`).day(0);

    // //日历主体渲染结束日期
    // let endDate = dayjs(`${2023}-${4}`).endOf("month").day(6);

    // for (let i = 0; i < 7; i++) {
    //   console.log(startDate.date(), "我服了");
    // }

    const getReturn = (time) => {
      return {
        year: time.year(),
        month: time.month() + 1,
        date: time.date(),
        day: time.day(),
        time,
      };
    };

    const getTimeObj = (time) => {
      return {
        start: getReturn(dayjs(time).startOf("month")),
        end: getReturn(dayjs(time).endOf("month")),
        days: time.daysInMonth(),
      };
    };

    const current = getTimeObj(props.pageShowDate);
    console.log(current, "我嘿嘿嘿");

    const flatRows = Array(allDaysInOnePage)
      .fill(null)
      .map(() => ({}));
    const startIndex = current.start.day;

    // const firstDayOfWeek = calendar.day(); // 获取本月的第一天是周几
    console.log(flatRows, startIndex, "我时间");

    flatRows[startIndex] = current.start;

    for (let i = 0; i < startIndex; i++) {
      const calendarData = getReturn(
        dayjs(current.start.time).subtract(i + 1, "day"),
      );
      Object.assign(calendarData, {
        isPrev: true,
      });
      flatRows[startIndex - i - 1] = calendarData;
    }
    for (let i = 0; i < allDaysInOnePage - startIndex - 1; i++) {
      const calendarData = getReturn(
        dayjs(current.start.time).add(i + 1, "day"),
      );
      Object.assign(calendarData, {
        isNext: i >= current.days - 1,
      });
      flatRows[startIndex + i + 1] = calendarData;
    }

    const rows = Array(6)
      .fill(null)
      .map(() => []);
    for (let i = 0; i < 6; i++) {
      rows[i] = flatRows.slice(i * 7, 7 * (i + 1));

      // const weekTime = rows[i][0].time;

      // const weekRows = [...rows[i]];
      // rows[i].unshift({
      //   weekRows,
      //   // weekOfYear: weekTime.week(),
      // });
    }

    console.log(rows, "wi是time啊");

    rows.map((col) => {
      console.log(col, "我是col啊");
    });

    console.log(rows, "我是rows??");

    const classNames = computed(() => {
      return [`${prefixCls}-month`];
    });

    function changeDay(params) {
      props.selectHandler(params.time, false);
    }

    const getCellClassName = computed(() =>
      useCellClassName({
        prefixCls,
        mergedValue: props.value,
        // isSameTime: (current, target) => current.isSame(target, "day"),
      }),
    );

    // 下一月
    function next() {
      console.log("我func啊");
    }

    function useCellClassName({ prefixCls, mergedValue }) {
      return function getCellClassName(cellDateObj) {
        // const rangeStart = getDateValue(rangeValues, 0);
        // const rangeEnd = getDateValue(rangeValues, 1);
        // const hoverRangeStart = getDateValue(hoverRangeValues, 0);
        // const hoverRangeEnd = getDateValue(hoverRangeValues, 1);
        const isInView = !cellDateObj.isPrev && !cellDateObj.isNext;
        // const rangeAvailable = isInView && panel;
        // const isRangeStart =
        //   rangeAvailable && rangeStart && isSameTime(cellDateObj.time, rangeStart);
        // const isRangeEnd =
        //   rangeAvailable && rangeEnd && isSameTime(cellDateObj.time, rangeEnd);
        // const nearRangeStart =
        //   hoverRangeStart && rangeStart && hoverRangeStart.isBefore(rangeStart);
        // const nearRangeEnd =
        //   rangeEnd && hoverRangeEnd && hoverRangeEnd.isAfter(rangeEnd);
        // const isHoverNearRange =
        //   (nearRangeStart && isRangeStart) || (nearRangeEnd && isRangeEnd);
        const isToday = dayjs().isSame(cellDateObj.time, "day");
        // console.log(cellDateObj.time.day(), "我服了");
        // if (!panel && innerMode === "year") {
        //   isToday = dayjs().getNow().isSame(cellDateObj.time, "date");
        // }
        console.log(
          dayjs(mergedValue).isSame(cellDateObj.time, "day"),
          "我是否改变了",
        );
        return [
          `${prefixCls}-cell`,
          {
            [`${prefixCls}-cell-in-view`]: isInView,
            [`${prefixCls}-cell-today`]: isToday,
            [`${prefixCls}-cell-selected`]:
              mergedValue && dayjs(mergedValue).isSame(cellDateObj.time, "day"),
            // [`${prefixCls}-cell-range-start`]: isRangeStart,
            // [`${prefixCls}-cell-range-end`]: isRangeEnd,
            // [`${prefixCls}-cell-in-range`]:
            //   rangeAvailable && isInRange(cellDateObj.time, rangeStart, rangeEnd),
            // [`${prefixCls}-cell-in-range-near-hover`]: isHoverNearRange,
            // [`${prefixCls}-cell-hover-range-start`]:
            //   rangeAvailable &&
            //   hoverRangeStart &&
            //   isSameTime(cellDateObj.time, hoverRangeStart),
            // [`${prefixCls}-cell-hover-range-end`]:
            //   rangeAvailable &&
            //   hoverRangeEnd &&
            //   isSameTime(cellDateObj.time, hoverRangeEnd),
            // [`${prefixCls}-cell-hover-in-range`]:
            //   rangeAvailable &&
            //   isInRange(cellDateObj.time, hoverRangeStart, hoverRangeEnd),
            // [`${prefixCls}-cell-disabled`]: disabled,
          },
        ];
      };
    }

    return {
      classNames,
      weekList,
      rows,
      changeDay,
      active,
      getCellClassName,
      next,
    };
  },
});
export default month;
</script>
<style lang="scss">
@import "./index.scss";
</style>
